<template>
	<view>
		<view class="item bg-white">
			<view @click="getDetails(item.content_id)">
				<!-- <image v-if="currentIndex==0&&item.is_expires==1" class="item-img" src="@/static/images/my/expired.png"
					mode=""></image> -->
				<view class="Media Media--center">
					<view class="Media-body">
						<view class="Grid Grid--center text-xs" style="color: #999999; margin-bottom: 10px;">
							<view class="Grid-cell">{{item.wechat_info.title}}</view>
							<view v-if="currentIndex==0 && item.release_time">
								<view class="Grid Grid--center">
									<u-icon name="clock-fill" color="#E0DFDF"
										style="display: inline-block; margin-right: 3px;"></u-icon>
									<text>{{item.release_time.substring(5, 16)}}</text>
								</view>
							</view>
						</view>
						<view class="item-title">
							<u-tag v-if="item.is_expires==1" class="expired" size="mini" text="已过期" plain plainFill bg-color="#F0F0F0" color="#A6A6A6" border-color="#F0F0F0" mode="dark" style="font-weight: normal;" />
							<u-tag class="tag" :text="categoryMap[item.category_ids[0]].label" plain plainFill
								:bgColor="item.category_ids[0]==3 ? '#EDF8F1' : '#EDF8FF'"
								:color="item.category_ids[0]==3 ? '#52B36D' : '#3EA5E9'"
								:borderColor="item.category_ids[0]==3 ? '#EDF8F1' : '#EDF8FF'" mode="light" size="mini" style="font-weight: normal;" />
							{{item.title}}
						</view>
					</view>
					<view v-if="item.type == 2" style="margin-left: 5px;">
						<view class="Grid Grid--center Grid--justifyCenter" style="width: 90px; height: 90px; overflow: hidden; position: relative;">
							<u--image :width="90" :height="90" mode="aspectFill" :src="item.vid_img" :radius="10"></u--image>
							<view class="Grid Grid--center Grid--justifyCenter" style="position: absolute; width: 35px; height: 35px; border-radius: 50%; background: rgba(0, 0, 0, .6);">
								<u-icon name="play-right-fill" color="#ffffff" :size="12" style="margin-left: 3px;"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="item.market_ids.length && item.draft_status != 3" class="text-xs">
					<view class="Grid Grid--center" style="margin-bottom: 10px;">
						<u-tag v-for="(i, index) in item.market_ids.filter(i => i != 5 && i != 1)" :key="index"
							:text="setting.market[i].title" plain plainFill bgColor="#FFEFE4" color="#FF8D40"
							borderColor="#FFEFE4" size="mini" style="display: inline-block; margin-right: 5px;" />
					</view>
					<view v-if="item.market_ids.includes(5) && item.draft_status != 3" class="Grid Grid--center"
						style="margin-bottom: 5px;">
						<view class="Grid-cell Grid Grid--center"
							:style="{'color': item.marketing_tools[5].status ? '#ED5454' : '#ED5454'}">
							<view class="Grid Grid--center" style="background: #ED5454;border-radius: 4px;padding: 2px;margin-right: 8px;">
								<text style="padding: 0 4px;color: #FFF63A;font-weight: 600;">{{item.marketing_tools[5].status ? '秒杀' : '秒杀结束'}}</text>
								<u-count-down v-if="item.marketing_tools[5].status"
									:time="item.marketing_tools[5].secs * 1000" format="DD:HH:mm:ss" autoStart millisecond
									@change="onChange">
									<view class="time">
										<view v-if="timeData.days" class="time__custom">
											<text style="padding: 0 5px;"
												class="time__custom__item">{{ timeData.days > 9 ? timeData.days : '0' + timeData.days }}天</text>
										</view>
										<view class="time__custom">
											<text
												class="time__custom__item">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text
												class="time__custom__item">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text
												class="time__custom__item">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}</text>
										</view>
									</view>
								</u-count-down>
								<text style="padding: 2px 4px;font-size: 10px; background: #FFFFFF;border-radius: 2px;">{{item.marketing_tools[5].seckill_stock ? `${item.marketing_tools[5].sell}/${item.marketing_tools[5].seckill_stock}` : `${item.marketing_tools[5].sell}/不限量`}}</text>
							</view>
							<!-- <text style="padding: 0 4px;">&yen;{{item.marketing_tools[5].seckill_price}}</text> -->
							<!-- 'text-decoration': item.marketing_tools[5].status ? 'underline' : 'none' -->
							<text :style="{'padding': '2px 2px','border-radius': '4px','border': '1px solid #ED5454','font-size': '10px'}"
								@click.stop="item.marketing_tools[5].status && clickVirtualInventory(item)">虚拟&nbsp;&nbsp;&nbsp;{{item.marketing_tools[5].surplus_show}}</text>
						</view>
						<view
							:style="{'font-size': item.market_ids.includes(5) && item.marketing_tools[5].status ? '18px' : '12px', 'text-decoration': item.market_ids.includes(5) && item.marketing_tools[5].status ? 'initial' : 'line-through !important', 'color': item.market_ids.includes(5) && item.marketing_tools[5].status ? '#ed5454' : '#999999', 'font-weight': item.market_ids.includes(5) && item.marketing_tools[5].status ? 'bold' : 'initial'}">
							&yen;{{item.marketing_tools[5].seckill_price}}</view>
					</view>
				</view>
				<view class="Grid Grid--center item-time-num" style="margin-bottom: 10px;">
					<view v-if="currentIndex==0">
						<view class="Grid Grid--center">
							<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/2.png" mode="widthFix"
								style="width: 15px; height: 15px;"></image>
							<text @click.stop="callContentLog(item)"
								style="margin: 0 2px; margin-right: 10px;">{{item.hits}}</text>
							<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/1.png" mode="widthFix"
								style="width: 15px; height: 15px;"></image>
							<text @click.stop="callOrderList(item)" style="margin: 0 2px;">{{item.sale_num}}</text>
						</view>
					</view>
					<view class="item-time-num-price"
						:style="{'font-size': item.market_ids.includes(5) && item.marketing_tools[5].status ? '12px' : '18px', 'text-decoration': item.market_ids.includes(5) && item.marketing_tools[5].status ? 'line-through !important' : 'initial', 'color': item.market_ids.includes(5) && item.marketing_tools[5].status ? '#999999' : '#ed5454', 'font-weight': item.market_ids.includes(5) && item.marketing_tools[5].status ? 'initial' : 'bold'}">
						{{!(item.price * 1) ? '免费' : `￥${item.price}`}}
					</view>
				</view>
				<view v-if="item.draft_status != 4">
					<view v-if="item.match_info" class="item-content">
						<!-- {{JSON.parse(item.match_info).competition_info.name}} -->
						<!-- {{JSON.parse(item.match_info).match_time.substring(5,16)}}&nbsp;&nbsp;｜&nbsp;&nbsp;{{JSON.parse(item.match_info).home_team_info.team_name}}&nbsp;VS&nbsp;{{JSON.parse(item.match_info).away_team_info.team_name}} -->
						<view style="margin-bottom: 5px; font-weight: bold;">{{JSON.parse(item.match_info).competition_info.name}}</view>
						<view class="Grid Grid--1of2 Grid--center" style="position: relative;">
							<view class="Grid Grid--center Grid--justifyCenter Grid-cell"
								style="background-color: #ffffff; border-radius: 20px;">
								<image :src="JSON.parse(item.match_info).home_team_info.logo"
									style="width: 15px; height: 15px;"></image>
								<view
									style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;">
									{{JSON.parse(item.match_info).home_team_info.team_name}}</view>
							</view>
							<view class="Grid Grid--center Grid--justifyCenter Grid-cell"
								style="background-color: #ffffff; border-radius: 20px;">
								<image :src="JSON.parse(item.match_info).away_team_info.logo"
									style="width: 15px; height: 15px;"></image>
								<view
									style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;">
									{{JSON.parse(item.match_info).away_team_info.team_name}}</view>
							</view>
							<view
								style="position: absolute; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; color: #ffffff; background-color: #52B36D; font-size: 12px; left: 50%; margin-left: -9px; bottom: 5px;">
								<view style="scale: .8;">VS</view>
							</view>
						</view>
					</view>
					<view v-else class="item-content" style="font-weight: bold">{{item.match_nick || '暂无'}}</view>
				</view>
			</view>
			<view class="item-bottom Media Media--center Media--justifyCenter">
				<view>
					<!-- <text class="text-xs">【{{item.wechat_info.title}}】</text> -->
					<view v-if="currentIndex==0" id="popover-trigger" class="bottom-more" style="position: relative;"
						:data-name="item.content_id" @click.stop="handleClickIndex(item)">
						更多
						<view v-if="clickIndex == item.content_id && isClick" id="popover-content" class="popover">
							<!-- <view @click.stop="handleTask(item)">推送通知</view> -->
							<view @click.stop="copy(item)">复制</view>
							<view @click.stop="() => {
								callDiscount(item)
							}">{{item.discount ? '查看折扣' : '折扣'}}</view>
							<view @click.stop="clickDisable(item)">{{item.is_disable==1?'已下架':'已上架'}}</view>
							<!-- <view @click.stop="getEdit(item)">编辑</view> -->
							<view @click.stop="getDelete(item.content_id)">删除</view>

						</view>
					</view>
				</view>
				<view class="Media-body bottom-buttom">
					<view class="Grid Grid--justifyFlexEnd">
						<!-- <u-button v-if="currentIndex==0" class="buttom" shape="circle"
							@click="clickDisable(item)">{{item.is_disable==1?'已下架':'已上架'}}</u-button> -->
						<u-button v-if="currentIndex==0" class="buttom" shape="circle" @click="getEdit(item)"
							style="color: #666666; border-color: #E5E5E5;">编辑</u-button>
						<u-button v-if="currentIndex==0" class="buttom" shape="circle" @click="handleTask(item)"
							style="color: #52B36D; border-color: #52B36D;">推送</u-button>
						<u-button v-if="currentIndex==0" class="buttom" shape="circle" @click="clickIstop(item)"
							style="color: #52B36D; border-color: #52B36D;">{{item.is_top==1?'取消置顶':'置顶'}}</u-button>
						<u-button v-if="currentIndex==0 || currentIndex==4" type="primary" class="buttom" shape="circle"
							@click="canvasCode(item)">获取料码</u-button>
						<!-- <u-button v-if="currentIndex==4" type="primary" class="buttom" shape="circle"
							@click="editSkm(item)">编辑</u-button> -->
						<u-button v-if="currentIndex==1 || currentIndex==2 || currentIndex==4" class="buttom" shape="circle"
							@click="getDelete(item.content_id)">删除</u-button>
						<u-button v-if="currentIndex==1 || currentIndex==2" type="primary" class="buttom" shape="circle"
							@click="getEdit(item)">编辑</u-button>
						<u-button v-if="currentIndex==2" type="primary" class="buttom" shape="circle"
							@click="copy(item)">使用</u-button>
						<u-button v-if="currentIndex==3" class="buttom" shape="circle"
							@click="clickRestoreArticle(item)">还原</u-button>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		mapState
	} from "vuex";
	import {
		addTask
	} from '@/service/index.js'

	export default {
		name: 'Item',
		inject: ['callDisable', 'callIstop', 'callDele', 'callDiscount', 'callContentLog', 'callOrderList',
			'callVirtualInventory', 'callRestoreArticle', 'callEditSkm'
		],
		props: {
			item: {
				type: Object,
				default: () => []
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			clickIndex: {
				type: Number,
				default: ''
			}
		},
		data() {
			return {
				isClick: false,
				categoryMap: {
					3: {
						label: '足球',
						color: '#00b42a'
					},
					4: {
						label: '篮球',
						color: '#ffbf29'
					},
					5: {
						label: '收款码',
						color: 'rgb(226, 94, 35)'
					}
				},
				// marketIconMap: {
				// 	1: 'gift', // 留资优惠
				// 	2: 'red-packet', // 不中包退
				// 	3: 'coupon', // 买一送一
				// 	4: 'gift', // 新人首免
				// 	5: 'clock', // 定时秒杀
				// },
				timeData: {},
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				setting: state => state.login.setting
			})
		},
		mounted() {},
		destroyed() {
			window.removeEventListener("scroll", this.handleScroll);
			window.removeEventListener("click", this.handleScroll);
		},
		onHide() {},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			handleScroll(val) {
				if (val.target.dataset && val.target.dataset.name == this.item.content_id && val.target.innerHTML ==
					'更多') {
					return
				}
			},
			// 上下架
			clickDisable(item) {
				uni.showModal({
					content: `确认${item.is_disable == 1 ? '上架' : '下架'}该方案?`,
					success: (res) => {
						if (res.confirm) {
							let params = {
								ids: [item.content_id],
								is_disable: item.is_disable == 1 ? 0 : 1
							}
							this.callDisable(params)
						} else if (res.cancel) {}
					}
				});
			},
			// 置顶
			clickIstop(item) {
				let params = {
					ids: [item.content_id],
					is_top: item.is_top == 1 ? 0 : 1
				}
				this.callIstop(params)
			},
			// 编辑
			getEdit(e) {
				try {
					uni.setStorageSync('form', {
						content_id: e.content_id, // 方案id
						// 赛程日期
						match_date: e.match_date,
						category_ids: e.category_ids, // 类型：3 足球 4 篮球
						name: e.name,
						title: e.title, // 方案标题
						expires_time: e.expires_time, // 方案过期时间
						match_info: e.match_info, // 方案关联的赛事(json)
						match_data: e.match_data, // 方案关联的赛事(json)
						kuiper_data: e.kuiper_data, // 图标数据
						price: e.price, // 价格
						description: e.description, // 方案描述
						content: e.content, // 方案付费内容
						is_top: e.is_top, // 是否置顶，1是0否
						is_hot: e.is_hot, // 是否热门，1是0否
						is_rec: e.is_rec, // 是否推荐，1是0否
						is_disable: e.is_disable, // 是否禁用，1是0否
						wechat_id: e.wechat_id, // 方案关联公众号
						invisible_ids: e.invisible_ids, // 屏蔽不让查看的会员id,逗号分割
						release_time: e.release_time, // 定时发布时间
						push_fans: e.push_fans, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
						poster_info: e.poster_info, // 海报信息
						draft_status: e.draft_status, // 草稿状态(1-是,0-否)
						match_nick: e.match_nick,
						url: e.url,
						img_url: e.img_url,
						market_ids: e.market_ids,
						marketing_tools: e.marketing_tools,
						hits_show: e.hits_show,
						img_main: e.img_main,
						type: e.type, // 1文章 2视频
						vid: e.vid, // 视频id
						vid_img: e.vid_img, // 视频封面地址
						free_duration: e.free_duration, // 试看时长
						duration: e.duration
					});
					uni.$emit('tabbarIndexUpdate', {
						tabbarIndex: 1
					})
				} catch (e) {
					// error
				}
			},
			// 复制
			copy(e) {
				try {
					uni.setStorageSync('form', {
						content_id: '', // 方案id
						// 赛程日期
						match_date: e.match_date,
						category_ids: e.category_ids, // 类型：3 足球 4 篮球
						name: e.name,
						title: e.title, // 方案标题
						expires_time: '', // 方案过期时间
						match_info: e.match_info, // 方案关联的赛事(json)
						match_data: e.match_data, // 方案关联的赛事(json)
						kuiper_data: e.kuiper_data, // 图标数据
						price: e.price, // 价格
						description: e.description, // 方案描述
						content: e.content, // 方案付费内容
						is_top: e.is_top, // 是否置顶，1是0否
						is_hot: e.is_hot, // 是否热门，1是0否
						is_rec: e.is_rec, // 是否推荐，1是0否
						is_disable: e.is_disable, // 是否禁用，1是0否
						wechat_id: e.wechat_id, // 方案关联公众号
						invisible_ids: e.invisible_ids, // 屏蔽不让查看的会员id,逗号分割
						release_time: '', // 定时发布时间
						push_fans: e.push_fans, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
						poster_info: e.poster_info, // 海报信息
						draft_status: 1, // 草稿状态(1-是,0-否)
						match_nick: e.match_nick,
						url: e.url,
						img_url: e.img_url,
						market_ids: [],
						marketing_tools: {},
						hits_show: '',
						img_main: e.img_main,
						type: e.type, // 1文章 2视频
						vid: '', // 视频id
						vid_img: '', // 视频封面地址
						free_duration: '', // 试看时长
						duration: ''
					});
					uni.$emit('tabbarIndexUpdate', {
						tabbarIndex: 1
					})
				} catch (e) {
					// error
				}
			},
			// 删除
			getDelete(id) {
				uni.showModal({
					content: '确认删除该方案?',
					success: (res) => {
						if (res.confirm) {
							let params = {
								ids: id
							}
							this.callDele(params)
						} else if (res.cancel) {}
					}
				});
			},
			// 编辑收款码
			editSkm(e) {
				this.callEditSkm(e)
			},
			// 点击查看详情
			getDetails(id) {
				window.removeEventListener("scroll", this.handleScroll);
				window.removeEventListener("click", this.handleScroll);
				uni.navigateTo({
					url: `/pages/details/details?content_id=${id}&currentIndex=${this.currentIndex}&appid=${this.userInfo.appid}`
				})
			},
			// 发送事件
			canvasCode(item) {
				// uni.getSystemInfo({
				// 	success: (res) => {
				// 		if (res.deviceType == 'phone' && (res.osVersion < '16.1.1' || res.osVersion == '16.1.1')) {
				// 			uni.$emit('canvasCodeEvent', item)
				// 		} else {
				// 			uni.navigateTo({
				// 				url: `/pages/poster/poster?content_id=${item.content_id}&appid=${this.userInfo.appid}`
				// 			})
				// 		}
				// 	}
				// });
				uni.navigateTo({
					url: `/pages/poster/poster?content_id=${item.content_id}&appid=${this.userInfo.appid}`
				})
			},
			// 推送通知
			async handleTask(item) {
				const result = await addTask({
					content_id: item.content_id
				})
				if (result.code == 200) {
					uni.showToast({
						title: '已发起消息推送!',
						icon: 'none'
					})
				}
			},
			handleClickIndex(item) {
				this.isClick = !this.isClick
				uni.$emit('clickIndex', item.content_id)
			},
			// 设置虚拟库存
			clickVirtualInventory(item) {
				this.callVirtualInventory(item)
			},
			clickRestoreArticle(item) {
				uni.showModal({
					content: '确认还原该方案?',
					success: (res) => {
						if (res.confirm) {
							this.callRestoreArticle(item)
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
		padding: 12px 15px;
		margin-top: 10px;
		border-radius: 10px;

		// overflow: hidden;
		.item-img {
			width: 38px;
			height: 38px;
			position: absolute;
			right: 0;
			top: 0;
			transform: rotate(22deg);
		}

		// 标题
		.item-title {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
			-webkit-line-clamp: 2;
			/*要显示的行数*/
			/* autoprefixer: off */
			-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
			word-break: break-all;
			/* autoprefixer: on */
			margin-bottom: 8px;
			color: #222222;
			font-size: 14px;
			font-weight: bold;
			.expired{
				font-size: 10px;
				display: inline-block;
				margin-right: 5px;
			}
			.tag {
				font-size: 10px;
				display: inline-block;
				margin-right: 6px;
				
				::v-deep .u-tag--mini {
					padding: 0;
					justify-content: center;
				}
			}
			::v-deep .u-tag--mini{
				height: 18px;
				padding: 0 5px !important;
			}
		}

		// 已过期
		.item-stale {
			width: 45px;
			height: 20px;
			background: #F3F3F3;
			font-size: 11px;
			color: rgba(0, 0, 0, 0.4);
			line-height: 20px;
			padding: 0;
			text-align: center;
			display: inline-block;
			margin-top: 6px;
		}

		// 内容
		.item-content {
			background: #F0F8F3;
			border-radius: 5px;
			font-size: 12px;
			color: #52B36D;
			line-height: 28px;
			padding: 8px;
			margin-bottom: 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}

		//发布数据·浏览量·已购买数量
		.item-time-num {
			font-size: 12px;
			color: #999999;
			text-align: left;

			&>view:nth-child(1) {
				flex: 1;
			}

			.item-time-num-price {
				// color: #E25E23;
				// font-weight: bold;
				// font-size: 18px;
				text-align: right;
			}
		}

		// 更多·功能按钮
		.item-bottom {
			.bottom-more {
				flex: 1;
				font-size: 12px;
				color: #999999;
			}

			.bottom-buttom {

				.buttom {
					width: 62px;
					font-size: 12px;
					height: 28px;
					margin: 0 0 0 5px;
					padding: 0;
				}

				.code-button {
					// border-color: #0074FF;
					// color: #0074FF;
				}
			}

			.cg-bottom-buttom {}

			.popover {
				position: absolute;
				// box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
				box-shadow: 2px -6px 12px 0px rgba(0, 0, 0, 0.175);
				text-align: center;
				width: 68px;
				background: #FFFFFF;
				z-index: 9;
				padding: 6px;
				// top: -180px;
				top: 30px;
				left: 0;

				&>view {
					font-size: 12px;
					color: rgba(51, 51, 51, 0.7);
					text-align: center;
					line-height: 32px;
				}
			}

			.popover::after {
				content: "";
				position: absolute;
				width: 20px;
				height: 10px;
				// bottom: 0;
				top: 0;
				left: 4px;
				background: #ffff;
				transform: rotate(45deg);
			}
		}
	}

	.time {
		@include flex;
		align-items: center;
		margin-right: 6px;
		&__custom {
			// margin-top: 4px;
			// width: 22px;
			// height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				// color: #fff;
				// color: #e45656;
				color: #FFFFFF;
				font-size: 12px;
				text-align: center;
				margin-right: 2px;
			}
		}

		&__doc {
			// color: #e45656;
			color: #FFFFFF;
			// padding: 0px 4px 0 2px;
			margin-right: 2px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>